<script lang="ts" setup>
import { getPatientOrderAddressAPI } from '@/apis/order'
import type { AddressItem } from '@/types/order'
import { ref } from 'vue'

// 地址列表
const addressList = ref<AddressItem[]>([])

// 获取地址列表
const getAddressList = async () => {
  const res = await getPatientOrderAddressAPI()
  addressList.value = res.data
}

// 删除地址
const handleDelete = async (id: string) => {
  try {
    await uni.showModal({
      title: '提示',
      content: '确认删除该地址吗？',
    })
    // await deletePatientOrderAddressAPI(id)
    // 重新获取列表
    getAddressList()
    uni.showToast({ title: '删除成功' })
  } catch (error) {
    uni.showToast({ title: '删除失败', icon: 'error' })
  }
}

// 添加地址
const onAddAddress = () => {
  uni.navigateTo({ url: '/subpkg_medicine/pages/address/form' })
}

// 编辑地址
const onEditAddress = (id: string) => {
  uni.navigateTo({ url: `/subpkg_medicine/pages/address/form?id=${id}` })
}

// 页面加载时获取列表
getAddressList()
</script>

<template>
  <scroll-view class="address-page">
    <!-- 地址列表 -->
    <uni-swipe-action>
      <uni-swipe-action-item v-for="item in addressList" :key="item.id">
        <view class="address-item">
          <view class="address-info" @click="onEditAddress(item.id)">
            <view class="location">
              <text class="region">{{ item.province }} {{ item.city }} {{ item.county }}</text>
              <text v-if="item.isDefault" class="badge">默认</text>
            </view>
            <view class="detail">{{ item.addressDetail }}</view>
            <view class="receiver">
              {{ item.receiver }}
              <text class="mobile">{{ item.mobile }}</text>
            </view>
          </view>
          <view class="address-edit">
            <button class="edit-btn" @click="onEditAddress(item.id)">编辑</button>
            <button class="delete-btn" >删除</button>
          </view>
        </view>
      </uni-swipe-action-item>
    </uni-swipe-action>

    <!-- 添加地址按钮 -->
    <view class="add-address" @click="onAddAddress">
      <uni-icons type="plusempty" size="20" />
      <text>添加收货地址</text>
    </view>
  </scroll-view>
</template>

<style lang="scss">
.address-page {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #f6f6f6;
}

.address-item {
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;

  .address-info {
    .location {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;

      .region {
        font-size: 32rpx;
        color: #121826;
      }

      .badge {
        margin-left: 20rpx;
        font-size: 24rpx;
        color: #16c2a3;
        background-color: #ecf9f7;
        padding: 4rpx 10rpx;
        border-radius: 4rpx;
      }
    }

    .detail {
      font-size: 28rpx;
      color: #848484;
      margin-bottom: 10rpx;
    }

    .receiver {
      font-size: 28rpx;
      color: #121826;

      .mobile {
        margin-left: 20rpx;
        color: #848484;
      }
    }
  }

  .address-edit {
    display: flex;
    justify-content: flex-end;
    margin-top: 20rpx;
    gap: 20rpx;

    button {
      font-size: 26rpx;
      padding: 10rpx 20rpx;
      border-radius: 6rpx;

      &.edit-btn {
        color: #16c2a3;
        background-color: #ecf9f7;
      }

      &.delete-btn {
        color: #ff5f5f;
        background-color: #fff0f0;
      }
    }
  }
}

.add-address {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  background-color: #fff;
  font-size: 32rpx;
  color: #16c2a3;

  .uni-icons {
    margin-right: 10rpx;
  }
}
</style>
